<%@page import="entity.ScenicSpot"%>
<%@page import="Dao.ScenicSpotDao"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购票 - 山东旅游网</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">山东旅游网</div>
        <nav>
            <ul>
                <li><a href="customer.jsp">首页</a></li>
                <li><a href="beautifulshandong.jsp">魅力山东</a></li>
                <li><a href="infomation.jsp">资讯</a></li>
                <li><a href="scenicspots.jsp">景点</a></li>
                <li><a href="ticketpurchase.jsp">购票</a></li>
            </ul>
        </nav>
        <nav class="user-actions">
            <ul>
                <li><a href="#">${userInfo.username}[${userInfo.memberLevel}]</a></li>
                <li><a href="userinfo.jsp">个人信息</a></li>
                <li><a href="SalesRecordServlet?userID=${userInfo.userID}&usermemberLevel=${userInfo.memberLevel}">消费记录</a></li>
                <li><a href="#">留言与回复</a></li>
                <li><a href="index.jsp">退出</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>购票</h1>
        <form action="scenicspotservlet" method="post">
            <div class="form-group">
                <label for="spot">选择景点：</label>
                <select id="spot" name="spotID" required>
                    <option value="">请选择景点</option>
                    <%
                        // 从数据库中获取景点列表
                        ScenicSpotDao scenicSpotDao = new ScenicSpotDao();
                        List<ScenicSpot> spots = scenicSpotDao.getAllScenicSpots();
                        for (ScenicSpot spot : spots) {
                    %>
                    <option value="<%= spot.getSpotID() %>">
                        <%= spot.getSpotName() %> - 票价: <%= spot.getTicketPrice() %>元 - 剩余票数: <%= spot.getRemainingTickets() %>
                    </option>
                    <%
                        }
                    %>
                </select>
            </div>
            <div class="form-group">
                <label for="quantity">购票数量：</label>
                <input type="number" id="quantity" name="quantity" min="1" required>
            </div>
            <div class="form-group">
                <button type="submit">提交</button>
            </div>
        </form>
    </main>

    <footer>
        <div class="footer-container">
            <div class="footer-left">
                <div class="footer-text">
                    <p>
                        <span>Copyright © 2024</span>
                        <span>山东建筑大学</span>
                    </p>
                </div>
            </div>
        </div>
    </footer>
</body>
<style>
    /* 全局样式 */
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* 确保 body 至少占满整个视口高度 */
    }

    /* 头部样式 */
    header {
        background-color: white;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        padding: 10px 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .logo {
        color: orange;
        font-size: 24px;
        font-weight: bold;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    nav ul li {
        margin-left: 20px;
    }

    nav ul li a {
        text-decoration: none;
        color: gray;
    }

    nav ul li a:hover {
        color: black;
    }

    /* 主体内容样式 */
    main {
        flex: 1; /* 让 main 占据剩余空间 */
        padding: 20px;
        text-align: center;
    }

    h1 {
        color: orange;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .form-group select, .form-group input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .form-group button {
        background-color: green;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .form-group button:hover {
        background-color: #008000;
    }

    /* 页脚样式 */
    footer {
        background-color: green;
        color: white;
        padding: 15px 0;
        width: 100%;
        text-align: center;
        margin-top: auto; /* 将 footer 推到页面底部 */
    }

    .footer-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer-text {
        text-align: center;
    }
</style>
</html>